<template>
	<view class="logBox">
		<up-sticky>
		<Header></Header>
		</up-sticky>
		<view class="boxTwo">
			<view class="boxTwo-title">
				{{title}}
			</view>
			<view class="boxTwoContent">
				<div class="boxTwoContentBox" contenteditable="true">
					<!-- {{content}} -->
					<!-- <iframe ref="externalFrame" height="100%" :srcdoc="content" frameborder="0">

					</iframe> -->
					<view class="box">
						<div class="boxContent" :contenteditable="true" :innerHTML="content">

						</div>
					</view>

				</div>
			</view>
		</view>
		<Footer></Footer>
	</view>
</template>

<script setup>
	import Header from '../compontents/header.vue'
	import Footer from '../compontents/footer.vue'
	import {
		ref,
		getCurrentInstance,
		onMounted,
		nextTick,
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import api from "../../utils/request.js"
	const type = ref('')
	const id = ref('')
	const content = ref('')
	const title = ref('')
	const externalFrame = ref(null)
	// 在test.vue页面接受参数
	onLoad((option) => {
		type.value = option.type
		id.value = option.id
		if (type.value == 'log') {
			handleLogInfo()
		} else {
			handleHelpInfo()
		}

	})
	onMounted(() => {

		nextTick(() => {
			setIframeHeight(externalFrame.value);
		})
	})
	const handleLogInfo = function() {
		api.get('v1/home/getLogInfo?id=' + id.value).then(res => {
			content.value = res.data[0].content
			title.value = res.data[0].title
		}).catch(err => {})
	}
	const handleHelpInfo = function() {
		api.get('v1/home/getOperateInfo?id=' + id.value).then(res => {
			content.value = res.data[0].content
			title.value = res.data[0].title
		}).catch(err => {})
	}
	const setIframeHeight = function(iframe) {
		if (iframe) {
			console.log(iframe.offsetHeight)
			var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
			if (iframeWin.document.body) {
				iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body
					.scrollHeight;
				// iframe.height = 1000
			}
		}
	};
</script>

<style lang="scss" scoped>
	p {
		width: 100% !important;
		height: 100% !important;

		img {
			width: 50% !important;
			height: 100% !important;
		}
	}

	.logBox {
		width: 100%;
		height: 100%;

		.boxTwo {
			height: 100%;
			padding: 0 23rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.boxTwo-title {
				height: 110rpx;
				line-height: 110rpx;
				text-align: center;
				font-weight: 600;
				font-size: 32rpx;
			}

			.boxTwoContent {
				width: 100%;
				height: calc(100% - 110rpx);
				margin-bottom: 26rpx;
				// text-align: center;

				.boxTwoContentBox {
					height: calc(100% - 26rpx);
					display: flex;
					flex-wrap: wrap;
					justify-content: center;

					// padding: 0 15rpx;
					.box {
						width: 100%;

						.boxContent {
							width: 100%;
						}
					}
				}

			}
		}
	}
</style>